<!DOCTYPE html>
<html html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <style>

        .bb{
            height: 20px;
        }
        .cc{
            height: 8px;
            font-size: larger;
        }
        p{
            width: 130px;
            border:1px solid  	#A9A9A9;
        }

        .nav{
            height: 60px;

        }
        .aa{
            height: 100px;
        }
    </style>
</head>
<body>
<div>
    <div class="nav" style="background-color: #219aff"><h1 align="center">湖北省公路网综合评价系统</h1></div>
    <div style="width: 100%;height:540px; ">
        <div clss="le" style=" background-color: #219aff; margin-left: 0px; width: 10%;height:540px;float: left;">
            <table align="center">
                <tr><td class="aa"><button onclick="jishu()" style="background-color: #219aff">技术评价</button></td></tr>
                <tr><td class="aa"><button onclick="qq()" style="background-color: #219aff">经济评价</button></td></tr>
                <tr><td class="aa"><button onclick="cd()" style="background-color: #219aff">社会环境评价</button></td></tr>
                <tr><td class="aa"> <button onclick="dd()" style="background-color: #219aff">综合评价</button></td></tr>

            </table>
        </div>
        <div style="width:90%;height:540px;float: right;" id="rightContent">

            <table align="center" style="margin-top: 0px;  margin-left: 300px;">
                <tr>
                    <td><h3>参数输入</h3></td>
                </tr>
                <tr>
                    <td>噪声衰减距离:</td>
                    <td><input/></td>
                    <td>米</td>
                    <td><button type="submit" class="but2" onclick="pingjia()">评价</button></td>
                </tr>
            </table>
            <table id="xy" align="center" style="margin-top: 0px;  margin-left: 300px;visibility: hidden;">
                <tr>
                    <td><h3>影响区域</h3></td>
                </tr>
                <tr class="bb">
                    <td class="cc">受影响县数:</td>
                    <td class="cc"><p id="xian"></p></td>
                    <td class="cc">县数:</td>
                    <td class="cc"><p id="xiana"></p></td>
                </tr>
                <tr class="bb">
                    <td class="cc">受影响乡数:</td>
                    <td class="cc"><p id="xiang"></p></td>
                    <td class="cc">乡数:</td>
                    <td class="cc"><p id="xianga"></p></td>
                </tr>
                <tr><td><button onclick="xia()">下一步</button></td></tr>
            </table>

        </div>
    </div>
</div>

<script  th:inline="javascript">
    var id
    $(function () {
         id = location.search.substr(1);
        $.ajax({
            url:"http://localhost:8080/manager/surrou/getSurrouById",
            type:'get',
            data:{id:id},
            success:function(message){
                if(message.status==0){
                    var data=message.data;
                    $("#xian").html(data.xian);
                    $("#xiana").html(data.xiana);
                    $("#xiang").html(data.xiang);
                    $("#xianga").html(data.xiang);
                }else {
                    alert(message.msg);
                }
            }
        });
    })
    function jishu() {
        window.location.href = "/shiyan"+"?"+id;
    }
    function qq() {
        window.location.href = "/jinji"+"?"+id;
    }
    function cd() {
        window.location.href = "/shehui"+"?"+id;
    }
    function dd() {
        window.location.href = "/zonghe"+"?"+id;
    }
    function xia() {
        window.location.href = "/zonghe"+"?"+id;
    }
    function pingjia() {
        var jisuan=document.getElementById("xy");
        jisuan.style.visibility="visible";
    }

</script>
</body>
</html>